imengyu
/
wenbao-website


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
							<template>
  <!-- 分类 -->
  <div class="main-background">
    <!-- SEO -->
    <Head>
      <Title>厦门市文化遗产保护中心 - {{ articlesData.content.value?.title }}</Title>
      <Meta name="description" content="" />
      <Meta name="keywords" content="" />
    </Head>
    <!-- 轮播 -->
    <Carousel v-bind="carouselConfig" class="main-header-image carousel-light">
      <Slide 
        v-for="(item, key) in carouselData.content.value"
        :key="key"
        class="main-header-image"
      >
        <img class="main-header-image" v-if="item.image" :src="item.image" />
      </Slide>
      <template #addons>
        <Navigation />
        <Pagination />
      </template>
    </Carousel>

    <!-- 主要内容 -->
    <div class="main-content">
      <div class="container">
        <div class="row">
          <!-- 左侧导航 -->
          <div class="col-12 col-sm-12 col-md-4 col-lg-3">
            <div class="sidebar">
              <div class="title">
                <h2>{{ articlesData.content.value?.channel?.name }}</h2>
              </div>
              <ul class="sidebar-menu">
                <li @click="router.back()">
                  <div>
                    <Icon name="material-symbols:undo" />
                    返回上一级
                  </div>
                </li>
              </ul>
            </div>
          </div>
          
          <!-- 右侧内容 -->
          <div class="col-12 col-sm-12 col-md-8 col-lg-9">
            <div class="content">
              <div class="section-title">
                <h2 class="icon">{{ articlesData.content.value?.channel?.name }}</h2>
                
                <nav aria-label="breadcrumb">
                  <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">首页</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ articlesData.content.value?.channel?.name }}</li>
                  </ol>
                </nav>
              </div>
              
              <SimplePageContentLoader :loader="articlesData">
                <div v-if="articlesData.content.value"  class="news-detail">
                  <h1>{{ articlesData.content.value.title }}</h1>
                  <div class="times">
                    <p class="date">时间：{{ DateUtils.formatDate(new Date(
                      (articlesData.content.value.publishtime ||  
                      articlesData.content.value.createtime  || 0) * 1000), 'yyyy-MM-dd') }}</p>
                    <p class="views">浏览量： {{ articlesData.content.value.views }} </p>
                  </div>
                  <div v-if="!articlesData.content.value.content &&articlesData.content.value.image" class="head-image">
                    <img :src="articlesData.content.value.image" />
                  </div>

                  <div class="content" v-html="articlesData.content.value.content">
                  </div>
                  <a-empty v-if="!articlesData.content.value.content"
                    description="暂无内容"
                  />
                </div>
              </SimplePageContentLoader>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
import { useSSrSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import { DateUtils } from '@imengyu/imengyu-utils';
import SimplePageContentLoader from '~/components/content/SimplePageContentLoader.vue';

const carouselConfig = {
  itemsToShow: 1,
  wrapAround: true,
  autoPlay: 5000,
}

const route = useRoute();
const router = useRouter();
const articleId = parseInt(route.params.id as string);

const carouselData = await useSSrSimpleDataLoader('carousel', async () => {
  const res = await $fetch(`/api/carousel`);
  if (!res.status)
    throw new Error(res.message);
  return res.data;
});
const articlesData = await useSSrSimpleDataLoader('articles' + articleId, async () => {
  const res = await $fetch(`/api/article/${articleId}`, {
    method: 'GET',
  });
  if (!res.status)
    throw new Error(res.message);
  return res.data;
});

watch(() => route.query.id, async (newVal, oldVal) => {
  if (newVal !== oldVal) {
    articlesData.loadData(undefined, true);
  }
});
</script>

<style lang="scss">
@use "sass:list";
@use "sass:math";
</style>